@include b(markdown-message) {
  border-radius: 5px;

  .cherry {
    border-radius: #{getCssVar('ai-chat', 'border-radius')};
    box-shadow: none;
  }

  .cherry-previewer {
    padding: 8px;
    border: 0;
    figure > svg {
      min-height: 100px;
      width: 100%;
    }
  }

  .anchor {
    display: none !important;
  }

  @include when(loading) {
    @include b(markdown-message-header) {
      @include e(caption) {
        font-size: 0;

        &::after {
          display: block;
          width: 11px;
          height: 11px;
          content: '';
          border: 3px solid #3b3b3b;
          border-top-color: transparent;
          border-radius: 100%;
          animation: circle infinite 0.75s linear;
        }
      }
    }
  }
}

@include b(markdown-message-header) {
  display: flex;
  margin-bottom: 8px;

  @include e(caption) {
    flex: 0;
    width: auto;
    min-width: 32px;
    min-height: 32px;
    padding: 6px;
    margin-right: 2px;
    font-size: 14px;
    font-weight: 800;
    color: #{getCssVar('ai-chat', 'color')};
  }
}

@keyframes circle {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}
